<script setup lang='ts'>
import { CommentType } from '@/models/comment';
import { useRouter } from 'vue-router';

const router = useRouter()
interface CommentListProps {
  commentList:CommentType[]
}
const props = withDefaults(defineProps<CommentListProps>(),{
  commentList: []
})
// 去帖子页面
const toBlog = (id:any) => {
  router.push({
    path: '/blog/detail',
    query: {
      id
    }
  })
}
</script>
<template>
  <van-cell-group v-for="comment in commentList" >
    <van-cell :border="false">
      <template #icon>
         <van-image fit="fill" class="team_img" round :src="comment.commentUser.avatarUrl" />
      </template>
      <template #title>
        <span class="title">{{ comment.commentUser.username }}</span>
      </template>
      <template #label>
        <span class="title">{{ comment.createTime + '&nbsp评论了你的帖子' }}</span>
      </template>
    </van-cell>
    <div class="comment_content">
      <van-text-ellipsis :content="comment.content" rows="4"/>
    </div>
    <van-cell @click="toBlog(comment.blogId)" :title="comment.commentUser.username" class="likeContent" :border="false">
      <template #right-icon v-if="comment.blog?.coverImage">
         <van-image fit="fill" class="team_img" :src="comment.blog?.coverImage" />
      </template>
      <template #title>
        <span class="title">{{ comment.blog?.title }}</span>
      </template>
      <template #label>
        <span class="title">{{ comment.blog?.content }}</span>
      </template>
    </van-cell>
  </van-cell-group>
</template>
<style scoped >
.team_img{
  height: 40px;
  width: 40px;
}
.title{
  margin-left: 10px;
}
.likeContent{
  width: 350px;
  height: 60px;
  background-color: #ededed;
  margin: 0 16px;
}
.comment_content{
  margin: 0 16px;
}

</style>
